<template>
  <div class="h-[48px] flex justify-between items-center" @click="switchResult">
    <div class="w-[50px] text-center text-[14px] text-[#555]">{{ preDrawIssue }}</div>
    <div class="flex-1 w-0 flex items-center">
      <div class="flex" v-if="roomState.opened">
        <scOpening type="small" class="!mr-[2px]" />
      </div>
      <div class="flex" v-else>
        <scBall type="small" class="!mr-[2px]" :num="i" v-for="i in lotteryCode"></scBall>
      </div>
      <div class="w-[44px] flex flex-col items-center justify-center">
        <div class="text-[11px] text-[#898989]">冠亚和</div>
        <div class="w-[34px] text-[10px] mt-[2px] flex justify-between">
          <span>{{ extendedRes?.sum }}</span>
          <span
            class="text-red"
            :class="{
              'text-blue': extendedRes?.dx == '小'
            }"
          >
            {{ extendedRes?.dx }}
          </span>
          <span
            class="text-red"
            :class="{
              'text-blue': extendedRes?.ds == '单'
            }"
            >{{ extendedRes?.ds }}</span
          >
        </div>
      </div>
      <div class="flex-1 flex justify-end mr-[14px]">
        <img class="w-[15px] h-[9px]" src="@/assets/images/down.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { scSumLH } from "@/utils/game";
import { useResult } from "../hooks/use-result";

const roomState = inject<RoomState>("roomState") as RoomState;
const { scBall, scOpening, preDrawIssue, lotteryCode, switchResult } = useResult();

const extendedRes = computed(() => scSumLH(lotteryCode.value));
</script>
